Índice

    Creando tu Página "About Me" con Etiquetas HTML Esenciales

    Cuando comienzas a aprender desarrollo web, uno de los primeros proyectos que seguramente crearás es una página personal o "About Me". Este tipo de proyecto es una excelente forma de practicar las bases del lenguaje HTML, mientras creas algo que puedes compartir con otros. En este artículo, te guiaré a través del proceso de construir tu propia página web utilizando etiquetas HTML esenciales. ¡Comencemos!

    Objetivo:

    El objetivo de este ejercicio es crear una página web personal que te permita practicar el uso de diferentes etiquetas HTML, aplicar estilos directamente en las etiquetas y estructurar tu contenido de una manera semántica. A lo largo del proceso, te familiarizarás con cómo construir una estructura básica en HTML y cómo hacer que tu contenido sea más atractivo visualmente.

    Herramientas:

    Para este proyecto, utilizaremos Visual Studio Code (VSCode), un editor de código muy popular entre desarrolladores. Si no lo tienes instalado, puedes descargarlo desde su sitio web oficial.

    Preparación del Entorno:

    Antes de comenzar a escribir código, necesitas preparar tu entorno de trabajo. Sigue estos pasos:

    1. Abre Visual Studio Code.
    2. Crea una nueva carpeta en tu escritorio con el nombre "mi_pagina_sobre_mi". Esta carpeta contendrá todos los archivos relacionados con tu página web.
    3. Abre la carpeta en VSCode. Para hacer esto, puedes ir a "Archivo > Abrir Carpeta" y seleccionar la carpeta que acabas de crear.
    4. Crea un nuevo archivo dentro de esta carpeta llamado index.html. Este será el archivo principal donde escribirás tu código HTML.

    Estructura Básica del Documento:

    Una vez que tu entorno esté listo, es momento de empezar con la estructura básica de tu documento HTML. Como todas las páginas web, el archivo index.html comenzará con la declaración del tipo de documento, que indica al navegador que estamos escribiendo en HTML5.

    <!DOCTYPE html> <html lang="es">

    Es importante especificar el idioma de tu documento usando lang="es", ya que esto ayuda a los navegadores y a las herramientas de accesibilidad a interpretar correctamente el contenido. Esto mejora tanto la accesibilidad como la experiencia del usuario.

    Añadiendo Secciones Importantes:

    Dentro de las etiquetas <html>, tu documento HTML debe estar dividido en dos secciones principales: el <head> y el <body>.

    El <head> contiene información importante sobre tu página, como el conjunto de caracteres que utilizarás y el título de la página. Aquí también puedes incluir metadatos y configuraciones para asegurar que tu página sea accesible en diferentes dispositivos, especialmente en móviles.

    <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi Página Sobre Mí</title> </head>
    • <meta charset="UTF-8"> asegura que caracteres especiales (como tildes y eñes) se muestren correctamente.
    • <meta name="viewport"> es crucial para que tu página sea responsive, es decir, que se vea bien en cualquier tamaño de pantalla, incluyendo móviles.
    • <title> establece el título que aparecerá en la pestaña del navegador.

    Contenido del Cuerpo (Body):

    Ahora que tienes la estructura básica en su lugar, es hora de añadir contenido dentro del <body> de tu página. Aquí es donde la mayor parte del trabajo ocurre.

    Título Principal:

    Empezamos con un título principal que dé la bienvenida a los visitantes de tu página. Este título debe estar dentro de un <h1>, que es la etiqueta destinada para los encabezados más importantes.

    <h1 style="color: #4A90E2;">Bienvenido a Mi Página Web</h1>

    En este caso, aplicamos un estilo en línea para cambiar el color del texto a un azul (#4A90E2). Los estilos en línea permiten personalizar la apariencia de tu contenido directamente en las etiquetas HTML.

    Sección "Sobre Mí":

    Después del título, querrás agregar una sección donde te presentes. Para organizar bien el contenido, utilizaremos un <div>, que es un contenedor genérico que puedes usar para agrupar diferentes elementos.

    <div style="background-color: #E8F0FE; padding: 10px; margin-bottom: 15px;"> <h2>Sobre Mí</h2> <p>Hola, mi nombre es <strong>Samuel Suárez</strong>. Soy estudiante y estoy aprendiendo HTML.</p> </div>

    Aquí, he añadido un subtítulo con <h2> y un párrafo con <p>. Además, he usado la etiqueta <strong> para destacar mi nombre en negrita. El estilo aplicado al <div> cambia el color de fondo a un azul claro y añade algo de espaciado (padding y margin) para que el contenido no se vea apretado.

    Sección "Mis Pasatiempos":

    A continuación, puedes hablar sobre tus pasatiempos usando una lista no ordenada. Esto es útil para enumerar elementos de manera clara.

    <h2>Mis Pasatiempos</h2> <ul> <li>Leer libros</li> <li>Programar</li> <li>Jugar videojuegos</li> </ul>

    La etiqueta <ul> crea una lista no ordenada, y cada elemento dentro de ella está representado por <li>. Esta es una forma excelente de organizar información.

    Sección "Mis Sitios Web Favoritos":

    Otra gran forma de practicar HTML es incluyendo enlaces a tus sitios web favoritos. Para esto, podemos usar una lista ordenada, que enumera elementos secuencialmente.

    <h2>Mis Sitios Web Favoritos</h2> <ol> <li><a href="https://www.google.com" target="_blank">Google</a></li> <li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li> <li><a href="https://www.github.com" target="_blank">GitHub</a></li> </ol>

    Los enlaces están envueltos en la etiqueta <a>, que requiere un atributo href para indicar la URL del sitio. Además, he añadido target="_blank" para que los enlaces se abran en una nueva pestaña.

    Añadiendo una Cita Inspiradora:

    Las citas son una excelente manera de personalizar tu página. Para ello, puedes usar la etiqueta <blockquote> y aplicarle un estilo en cursiva.

    <h2>Cita Inspiradora</h2> <blockquote style="font-style: italic;"> "El único modo de hacer un gran trabajo es amar lo que haces." <cite>- Steve Jobs</cite> </blockquote>

    La etiqueta <blockquote> sirve para mostrar citas destacadas, mientras que <cite> se usa para citar la fuente.

    Inserción de una Imagen:

    Para añadir más interés visual a tu página, puedes insertar una imagen usando la etiqueta <img>.

    <h2>Una Imagen de Mi Interés</h2> <img src="https://via.placeholder.com/400x200" alt="Imagen de ejemplo" style="border: 2px solid #4A90E2;">

    El atributo alt describe la imagen para los lectores de pantalla o en caso de que la imagen no cargue correctamente. También he añadido un borde alrededor de la imagen para hacerla destacar.

    Conclusión y Agradecimiento:

    Finalmente, cierra tu página con un agradecimiento. Esto deja una buena impresión en los visitantes.

    <p>Gracias por visitar mi página. ¡Espero que hayas disfrutado conocerme un poco más!</p>

    Vista Previa de tu Página "About Me"

    Aquí tienes una vista previa de cómo debería verse tu página "About Me" una vez que hayas seguido todos los pasos:

    Compara tu resultado con esta vista previa. No te preocupes si no es exactamente igual; lo importante es que hayas incluido todos los elementos principales y que la estructura sea similar.

    Próximos Pasos

    1. Revisa tu código y asegúrate de que todas las etiquetas estén correctamente cerradas.
    2. Abre tu archivo HTML en diferentes navegadores para asegurarte de que se ve bien en todos ellos.
    3. Comparte tu página con tus compañeros y pide retroalimentación.
    4. Considera aprender CSS para dar estilos más avanzados a tu página.
    5. Explora cómo hacer tu página responsive para que se vea bien en dispositivos móviles.